<style>
    #test + .layui-table-view .layui-table-body tbody > tr > td {
        padding: 0;
    }

    #test + .layui-table-view .layui-table-body tbody > tr > td > .layui-table-cell {
        height: 48px;
        line-height: 48px;
    }

    .tb-img-circle {
        width: 100%;
        height: 40px;
        cursor: zoom-in;
    }
</style>
<body>
<!-- 正文开始 -->
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-body">
            <!-- 表格工具栏 -->
            <form class="layui-form toolbar">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <select name="field_name" lay-verify="required" required>
                            <option value="product_name">产品名称</option>
                        </select>
                    </div>
                    <div class="layui-inline">
                        <input name="field_value" class="layui-input" placeholder="输入搜索内容"/>
                    </div>
                    <div class="layui-inline">
                        <div class="layui-input-inline">
                            <select name="cate_id">
                                <option value="">产品分类</option>
                                {{volist name="cate_list" id="item"}}
                                <option value="{{$item.id}}">{{$item.cate_name}}</option>
                                {{/volist}}
                            </select>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <button class="layui-btn icon-btn" lay-filter="search" lay-submit>
                            <i class="layui-icon">&#xe615;</i>搜索
                        </button>
                    </div>
                </div>
            </form>
            <!-- 数据表格 -->
            <table id="test" lay-filter="test"></table>
        </div>
    </div>
</div>

<!-- 表格操作列 -->
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn layui-btn-xs" lay-event="restore">还原</a>
</script>

<!-- js部分 -->
<script type="text/javascript" src="__TPL_RESOURCE_BACKEND__/libs/layui/layui.js"></script>
<script type="text/javascript" src="__TPL_RESOURCE_BACKEND__/js/common.js"></script>
<script>
    layui.use(['layer', 'form', 'table', 'admin'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var form = layui.form;
        var table = layui.table;

        /* 渲染表格 */
        var insTb = table.render({
            elem: '#test',
            url: "{{:url('Recycle/index')}}",
            page: {
                limit:20
            },
            method: 'post',
            contentType: 'application/json',
            toolbar: true,
            cols: [[
                {field: 'id', title: 'ID',width: 60},
                {
                    title: '图片', templet: function (d) {
                        var url = d.img_url;
                        if(url){
                            return '<img data-index="' + (d.LAY_INDEX - 1) + '" src="' + url + '" class="tb-img-circle" tb-img alt=""/>';
                        } else {
                            return '暂无';
                        }
                    }, align: 'center', width: 90, unresize: true
                },
                {field: 'product_name', title: '商品名称'},
                {field: 'product_name_en', title: '英文名称'},
                {field: 'cate_name_txt', title: '所属分类',width: 100},
                {field: 'sale', title: '售价'},
                {field: 'rands', title: '随机值'},
                {field: 'point_low', title: '波动最小值'},
                {field: 'point_top', title: '波动最大值'},
                {field: 'type', title: '数据方式',width: 160},
                {field: 'sort', title: '排序', width: 60},
                {title: '操作', toolbar: '#barDemo', align: 'center', width: 80}
            ]]
        });

        /* 表格搜索 */
        form.on('submit(search)', function (data) {
            insTb.reload({where: data.field, page: {curr: 1}});
            return false;
        });

        /* 表格工具条点击事件 */
        table.on('tool(test)', function (obj) {
            if (obj.event === 'restore'){ //删除
                doRestore(obj);
            }
        });

        /* 删除 */
        function doRestore(obj) {
            layer.confirm('确定要还原选中数据吗？', {
                skin: 'layui-layer-admin',
                shade: .1
            }, function (i) {
                layer.close(i);
                var loading = layer.load(3);
                $.ajax({
                    url: "{{:url('Recycle/restore')}}",
                    type: 'post',
                    data: {id: obj.data.id},
                    success: function (res) {
                        if (res.code != 0) {
                            layer.msg(res.msg, {icon: 5,time:1000});
                        } else {
                            layer.msg(res.msg, {icon: 1,time:1500});
                            insTb.reload();
                        }
                        layer.close(loading);
                    }, error: function () {
                        layer.msg('网络错误请稍后重试', {icon: 5,time:1000});
                        layer.close(loading);
                    }
                });
                return false;
            });
        }
    });
</script>
</body>
</html>
